<!-- 采购收货 -->
<template>
  <div class="app-container">
    <div class="cardBox">
      <leftTree
        ref="leftTree"
        :data="treeData"
        node-key="id"
        :default-props="defaultProps"
        search-key="supplierName"
        width="200px"
        :default-expand-keys="defaultExpandKeys"
        :defalut-expand-all="true"
        @handleNodeClickAll="handleNodeClick"
      />
      <el-col id="right-content" class="right-content" :offset="0" :span="18">
        <div class="box-title">
          <el-breadcrumb separator="/" style="line-height: 50px">
            <el-breadcrumb-item
              v-for="(item, index) in breadcrumb"
              :key="index"
              >{{ item }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
        <div class="search-and-button noLeftInput">
          <div class="btnList">
            <el-button type="primary" icon="el-icon-plus" @click="showDialog"
              >新建</el-button
            >
            <ImportFile
              url="/basic/equip/import"
              @getTableInfo="getTableInfo"
            />
            <el-button
              type
              icon="el-icon-refresh-left"
              @click="$router.push('/reload')"
              >刷新</el-button
            >
            <el-button type icon="el-icon-more">更多</el-button>
            <el-button
              type="primary"
              plain
              :icon="!show ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
              @click="show = !show"
              >查询条件</el-button
            >
          </div>
        </div>
        <transition name="el-zoom-in-top">
          <div v-show="show" class="more-search">
            <el-form :model="search" label-width="80px">
              <el-row>
                <el-col :xs="24" :xl="8" :md="8">
                  <el-form-item label="物料" prop="keyword">
                    <el-input
                      v-model="search.keyword"
                      clearable
                      placeholder="请输入名称或编码回车搜索"
                      @keyup.enter.native="getTableInfo()"
                      @clear="getTableInfo()"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :xl="8" :md="8">
                  <el-form-item label="单号" prop="objNo">
                    <el-input
                      v-model="search.objNo"
                      placeholder="请输入入库单号回车搜索"
                      clearable
                      @keyup.enter.native="getTableInfo()"
                      @clear="getTableInfo()"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :xl="8" :md="8">
                  <el-form-item label="收货日期" prop="beginDate">
                    <el-date-picker
                      v-model="search.planTime"
                      style="width: 100%"
                      type="daterange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期时间"
                      @change="getTableInfo()"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </transition>
        <el-row class="table">
          <el-table
            ref="tableData"
            v-loading="loading"
            :data="tableData"
            stripe
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column
              align="center"
              type="index"
              label="索引"
              width="60px"
            />
            <el-table-column
              v-for="item in fieldList"
              :key="item.id"
              :align="item.align || 'left'"
              :prop="item.code.split(':')[1]"
              :label="item.val"
              :min-width="item.width + 'px'"
              show-overflow-tooltip
            />
            <el-table-column
              label="操作"
              fixed="right"
              align="center"
              width="100px"
            >
              <template #default="{ row }">
                <el-button-group>
                  <el-button type="text" @click="showDialog(row)">
                    <i class="iconfont icon-search"></i>
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row class="numRight" v-if="JSON.stringify(num) !== '{}'">
          <div class="numRightDiv">
            <i class="iconfont icon-jisuanqi1"></i>
            <!-- <span>总订单数量:</span>
            <b>{{ num.statNum }}</b> -->
            <span>总已收数量:</span>
            <b>{{ num.statNum2 }}</b>
          </div>
        </el-row>
        <el-row>
          <div class="table-btn-box">
            <el-button
              @click="
                () => {
                  tableData.forEach((row) => {
                    $refs['tableData'].toggleRowSelection(row, true);
                  });
                }
              "
              >选择全部</el-button
            >
            <el-button
              @click="
                () => {
                  tableData.forEach((row) => {
                    $refs['tableData'].toggleRowSelection(row);
                  });
                }
              "
              >反向选择</el-button
            >
            <el-button @click="numGet()">
              统计
              <i class="iconfont icon-jisuanqi1" style="font-size: 13px"></i>
            </el-button>
            <el-button>
              更多菜单
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
          </div>
          <pagination
            ref="Pagination"
            :total="total"
            :current.sync="search.current"
            :size.sync="search.size"
            @pagination="getTableInfo"
          />
        </el-row>
      </el-col>
    </div>

    <!-- 新增编辑 -->
    <addAndModify
      ref="addAndModify"
      :supplier-all-list="supplierAllList"
      :user-all-list="userAllList"
      :wms-list-all="treeData2"
      @getTableInfo="getTableInfo"
    />
  </div>
</template>
<script>
import { getSupplierListApi } from "@/api/public";
import ImportFile from "@/components/ImportFile";
import Pagination from "@/components/Pagination";
import addAndModify from "./components/index";
import leftTree from "@/components/LeftTree";
import { mapGetters } from "vuex";
import { getUserListApi } from "@/api/public";
export default {
  components: {
    leftTree,
    Pagination,
    ImportFile,
    addAndModify,
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "children",
        label: "supplierName",
      },
      defaultExpandKeys: ["-1"],
      breadcrumb: ["供应商目录"],
      loading: false,
      tableData: [],
      multipleSelection: [],
      total: 0,
      userAllList: [],
      num: {},
      search: {
        current: 1,
        size: 20,
        objNo: "",
        keyword: "",
        beginDate: "",
        endDate: "",
        planTime: [],
        treeStr: "-1",
      },
      show: false,
      treeData: [],
      treeData2: [],
      supplierAllList: [],
      num: {},
    };
  },
  computed: {
    ...mapGetters(["compInfo"]),
  },
  created() {},
  async mounted() {
    await this.getTableInfo();
    await this.getWmsList();
    await this.getUserAll();
    await this.getSupplierAll();
  },
  methods: {
    /* 获取所有供应商 */
    async getSupplierAll() {
      const res = await getSupplierListApi();
      if (res?.data.code === 200) {
        this.treeData = [
          { id: "-1", supplierName: "供应商目录", children: res.data.data },
        ];
      }
    },
    /* 获取所有人员 */
    async getUserAll() {
      const res = await getUserListApi();
      if (res?.data.code === 200) {
        this.userAllList = res.data.data;
      }
    },
    timeDivide() {
      const { planTime } = this.search;
      if (planTime && planTime.length) {
        this.search.beginDate = planTime[0];
        this.search.endDate = planTime[1];
      } else {
        this.search.beginDate = "";
        this.search.endDate = "";
      }
      const search = {
        ...this.search,
      };
      delete search.planTime;
      return search;
    },
    async getTableInfo(page = 1) {
      let search = this.timeDivide();
      search.current = page;
      this.loading = true;
      const res = await this.$axios.post("/purchase/receipt/list", search);
      if (res?.data.code === 200) {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        setTimeout(() => {
          this.loading = false;
        }, 100);
      } else {
        this.loading = false;
      }
    },
    /* 统计 */
    async numGet() {
      let search = this.timeDivide();
      const res2 = await this.$axios.post("/purchase/receipt/stat", search);
      if (res2?.data.code === 200) {
        this.num = res2.data.data;
      }
    },
    /**
     * @description: 查询所有库房库位
     * @return {*}
     */
    async getWmsList() {
      const res = await this.$axios.get("wms/list");
      if (res?.data.code === 200) {
        this.treeData2 = [{ id: "-1", wmsName: "无", children: res.data.data }];
      }
    },
    /**
     * @description: 新增编辑
     * @return {*}
     */
    showDialog(row) {
      this.$refs["addAndModify"].showDialog(row);
    },
    /**
     * @description: 删除当前行数据
     * @param {*} row
     * @return {*}
     */
    deleteRow(row) {
      this.$confirm(`确认删除设备【${row.name}】？`, "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await this.$axios.delete(
            `/purchase/receipt/remove/${row.id}`
          );
          if (res.data.code === 200) {
            this.$notify.success("删除成功！");
            this.getTableInfo();
          } else {
            this.$notify.error(res.data.msg);
          }
        })
        .catch(() => {});
    },
    /**
     * @description: 树节点点击
     * @param {*} data
     * @param {*} node
     * @return {*}
     */
    handleNodeClick({ data, node }) {
      this.breadcrumb = [];
      this.returnNodeLabel(node.parent);
      this.breadcrumb.push(data.supplierName);
      this.search.treeStr =
        data.supplierName === "供应商目录" ? "-1" : data.supplierName;
      this.getTableInfo();
    },
    /**
     * @description: 递归获取名称
     * @param {*} node
     * @return {*}
     */
    returnNodeLabel(node) {
      if (node.parent) {
        this.breadcrumb.unshift(node.data.supplierName);
        this.returnNodeLabel(node.parent);
      }
    },
    /**
     * @description: 选中项
     * @param {*} val
     * @return {*}
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style lang="scss" scoped>
.numRight {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  .numRightDiv {
    width: 350px;
    height: 35px;
    line-height: 30px;
    background: #f9f9f9;
    padding: 5px 8px;
    border-radius: 20px;
    box-shadow: 0px 1px 2px 0px rgb(224, 224, 224);
    i {
      padding-right: 5px;
      font-size: 15px;
    }
    span {
    }
    b {
      font-weight: normal;
      padding: 0 15px 0 5px;
      color: #1890ff;
    }
  }
}
</style>
